<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<video id="videoScreen" src="" autoplay></video>
<video id="videoCamera" src="" autoplay></video>

<body>

  <script>
    // 获取显示窗口对象
    navigator.mediaDevices.getDisplayMedia({
      video: true,
      audio: true
    }).then(r => {
      // chrome升级后 之前的 createObjectUrl失效写法修改
      videoScreen.srcObject = r

    })

    // 获取摄像头数据
    navigator.mediaDevices.getUserMedia({
      video: true,
      audio: true
    }).then(r => {
      videoCamera.srcObject = r

    })
  </script>
</body>

</html>